<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户管理</title>
    <style type="text/css">
        body,html{font-family: "microsoft yahei"}
        .main {
            width: 971px;
            zoom: 1;
           
            float: left;
            margin-top: none;
        }

        .main h2{
            text-align: center;
            font-size:28px;
            color:#666;
            text-align: center;
        }

        .page_btn {
            padding-top: 40px;
            text-align: center;
        }

        .page_btn a {
            cursor: pointer;
            padding: 10px 17px;
            border: solid 1px #dbdbdb;
            font-size: 14px;
        }

        .num {
            padding: 0 10px;
        }

        .page_btn a:hover,.page-item:hover{
            color: #fff;
            background: #e84c3d;
            border: 1px solid #e84c3d;
        }

        .page-item {
            padding: 10px 17px;
            text-decoration: none;
            background-color: #ffffff;
            border: 1px solid #dbdbdb;
            color: #666666;
            margin: 0 3px;
            font-size: 14px;
            cursor: pointer;
        }

        .page-item.current {
            color: #fff;
            background: #e84c3d;
            cursor: pointer;
            border: 1px solid #e84c3d;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
        }
        .table-integral{margin-top: 20px;}
        .table-integral thead {
            background: #f7f7f7;
            height: 35px;
            text-align: center;
            line-height: 35px;
            font-size: 14px;
            color: #333;
        }
        .table-integral td {
            border: 1px solid #e5e5e5;
            border-collapse: collapse;
        }
        .table-integral tbody {
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            color: #666;
            text-align: center;
            line-height: 45px;
        }
        .table-integral td {
            border: 1px solid #e5e5e5;
            border-collapse: collapse;
        }
        .text-green {
            color: #00a65a !important;
        }
        .text-red {
            color: #dd4b39 !important;
        }
        .table-integral td a, .table-integral td a:hover, .table-integral td a:active, .table-integral td a:visited, .table-integral td a:focus {
            color: #0099cc;
            cursor: pointer;
            text-decoration: none;
        }
        .tips_info {
            border-radius: 10px;
            background: rgba(0,0,0,0.5);
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 60px;
            display: none;
            padding: 0 30px;
            z-index: 9999;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            max-width: 250px;
            height: 60px;
        }
    </style>
     <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="HT/js/jquery.min.js"></script>
    <script type="text/javascript">
		/* $(document).ready(function(){
			
			
			$("#1").show();//已发布
			$("#2").hide();//待审核
			$("#3").hide();//已删除
			$("#111").show();//已发布
			$("#222").hide();//待审核
			$("#333").hide();//已删除
			$(".1").click(function(){
				$("#1").show();//已发布
				$("#2").hide();//待审核
				$("#3").hide();//已删除
				$("#111").show();//已发布
				$("#222").hide();//待审核
				$("#333").hide();//已删除
			});
			$(".2").click(function(){
				$("#2").show();//已发布
				$("#1").hide();//待审核
				$("#3").hide();//已删除
				$("#222").show();//已发布
				$("#111").hide();//待审核
				$("#333").hide();//已删除
			});
			$(".3").click(function(){
				$("#3").show();//已发布
				$("#1").hide();//待审核
				$("#2").hide();//已删除
				$("#333").show();//已发布
				$("#111").hide();//待审核
				$("#222").hide();//已删除
			});
			
			
			
		}); */
    
		$(function() {
			$('#tz').click(function(){
			var ye = $('#randompage').val();
			var max=$('#aaa111').attr('data-aaa');
			if(ye<=max){
				location.href = "theUserManagement?pageNum=" + ye;
			}
			location.href = "theUserManagement?pageNum=" + max;
			})
			$('#sy').click(function(){
				location.href = "theUserManagement?pageNum=" + 1;
			})
			$('#syy').click(function(){
				var ye = $('#sy').attr('data-ggh');
				if(ye<=1){
				location.href = "theUserManagement?pageNum=" + 1;
				}
				location.href = "theUserManagement?pageNum=" + (--ye);
			})
			$('#xy').click(function(){
				var ye = $('#sy').attr('data-ggh');
				var yy = $('#wy').attr('data-ddd');
				
				if(ye==yy){
					location.href = "theUserManagement?pageNum=" +yy;
					return;
				}
				location.href = "theUserManagement?pageNum=" + (++ye);
			}) 
			$('#wy').click(function(){
				var yy = $('#wy').attr('data-ddd');
				location.href = "theUserManagement?pageNum=" + yy;
			}) 
						});
		
		
		
		
						
						
						
						
			
    </script>
</head>
<body>
<div class="main">
    <a class="1" ><font style="font-size:25px;">所有用户</font></a>
     
    <!-- 已发布文章 -->
    <table class="table-integral" id="1">
        <thead>
       
            <tr>
                <td style="width:140px;">用户id</td>
                <td style="width:140px;">用户名</td>
                <td style="width:140px;">用户密码</td>
                <td style="width:140px;">用户类型</td>
                <td style="width:145px;">性别</td>
                <td style="width:140px;">年龄</td>
                <td style="width:140px;">手机号码</td>
                <td style="width:140px;">时间</td>
                <td style="width:140px;">操作</td>
                
            </tr>
        </thead>
        <tbody id="content_page" >
        	<c:forEach items="${selectAll.listUser}" var="user">
            <tr>
                <td>${user.u_id}</td>
                <td>${user.u_name}</td>
                <td>${user.u_password}</td>
                <td>${user.u_type.u_tname}</td>
                <td>${user.u_gender}</td>
                <td>${user.u_age}</td>
                <td>${user.u_phone}</td>
                <td><fmt:formatDate value="${user.u_lock}"/> </td>
                <td><button data-method="setTop" class="layui-btn layui-btn-sm" data-id="${user.u_id}">修改</button></td>
            </tr>
            </c:forEach>

        </tbody>
    </table>
 
 
  <div id="111">	
					<label data-aaa="${selectAll.totalPage}" id="aaa111">当前数据库中共有${selectAll.totalPage}页</label>
					<label>跳转至第</label>
					<input id="randompage" type="text" name="dd"  />页
					<input type="button" value="跳转" id="tz"/>
					<label>当前是第${selectAll.pageNum}页</label>
				<br>
				<button id="sy" data-ggh="${selectAll.pageNum}">首页</button>
					<button id="syy" data-ggh="${selectAll.pageNum}">上一页</button>
					<button id="xy" data-ggh="${selectAll.pageNum}">下一页</button>
					<button id="wy" data-ggh="${selectAll.pageNum}" data-ddd="${selectAll.totalPage}">尾页</button>
		</div>	
    <!-- ******************************* -->

    
    <div id="wrap" class="page_btn clear"></div>
</div><!--main-->

<div id="info_modal" class="tips_info"></div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
layui.use('layer', function() { //独立版的layer无需执行这一句
	var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
	//触发事件
	  var active = {
	    setTop: function(obj){
	    	
	      var that = this; 
	      //多窗口模式，层叠置顶
	      layer.open({
	        type: 2 //此处以iframe举例
	        ,title: '用户详情'
	        ,area: ['300px', '500px']
	        ,shade: 0
	        ,maxmin: true
	      
	        ,content: 'ckUser?u_id='+$(obj).attr('data-id')
	        ,btn: [ '全部关闭'] //只是为了演示
	        ,btn1: function(){
	        	layer.closeAll();
	        }
	       
	        /* ,zIndex: layer.zIndex //重点1 */
	        ,success: function(layero){
	          /* layer.setTop(layero); //重点2 */
	        }
	      });
	    }
	}
	
	  $('.layui-btn').on('click', function(){
		    var othis = $(this), method = othis.data('method');
		    active[method] ? active[method].call(this, othis) : '';
		  });
})

</script>



<script type="text/javascript">
    function Pagination($content, $wrap, options) {
        this.$wrap = $wrap;
        this.$content = $content;
        this.options = $.extend({}, Pagination.defaultOptions, options);
        this.init();
    }
    Pagination.defaultOptions = {
        size: 4
    };
   
    Pagination.prototype.initEvents = function () {
        var _this = this;
        var $prev = this.$wrap.find('.prev');
        var $next = this.$wrap.find('.next');
        var $num = this.$wrap.find('.num');

        $prev.on('click', function () {
            _this.prev();
        });
        $next.on('click', function () {
            _this.next();
        });
        $num.on('click', '.page-item', function () {
            var page = $(this).data('page');
            _this.goTo(page);
        });
    };
    Pagination.prototype.prev = function () {
        this.goTo(this.currentPage - 1);
    };
    Pagination.prototype.next = function () {
        this.goTo(this.currentPage + 1);
    };
    Pagination.prototype.goTo = function (num) {
        if (typeof num !== 'number') {
            throw new Error('e');
        }
        if(num > this.totalPageNum || num <= 0) {
            return false;
        }

        this.currentPage = num;

        this.$wrap.find('.num')
            .children().eq(this.currentPage - 1)
            .addClass('current').siblings('.current')
            .removeClass('current');

        var left = (this.currentPage - 1) * this.options.size;
        var right = left + this.options.size;

        var $shouldShow = this.$content.children().filter(function (index) {
            return left <= index && index < right;
        });
        this.$content.children().hide();
        $shouldShow.show();
    };

    var pagi = new Pagination($('#content_page'), $('#wrap'));

    $(".table-integral td a").click(function(){
        $("#info_modal").html("领取成功哦~开心吧").fadeIn().delay(2000).fadeOut(300);

    })
</script>

</body>
</html>

